import domUtils from '../../utils/dom'
import delegates from '../../utils/delegates'
import {isMobile} from '../../utils/browser'

class Progress {
  constructor (player) {
    this.player = player

    this.subEvent()
    this.initPlayedBar()
    delegates(this.player, this)
      .method('seek')
      .method('getPosition')
      .method('getDuration')
  }

  subEvent () {
    const {video, loadedBar, playedBar, dtime, ptime} = this.player.dom

    ptime.innerHTML = '00:00'
    // loaded progress
    this.player.on('media_progress', () => {
      const percentage = video.buffered.length
        ? video.buffered.end(video.buffered.length - 1) / video.duration
        : 0
      loadedBar.style.width = percentage * 100 + '%'
    })

    // played progress
    this.player.on('media_timeupdate', () => {
      const percentage = video.currentTime / video.duration
      playedBar.style.width = percentage * 100 + '%'
      ptime.innerHTML = domUtils.secondToTime(video.currentTime)
      this.player._status.position = video.currentTime
    })

    // duration change
    this.player.on('media_durationchange', () => {
      if (video.duration !== 1) {
        dtime.innerHTML = domUtils.secondToTime(video.duration)
        this.player._status.duration = video.duration
      }
    })
  }

  setBarWidth (percentage) {
    this.player.dom.playedBar.style.width = percentage * 100 + '%'
  }

  getBarWidth () {
    return parseFloat(this.player.dom.playedBar.style.width) / 100
  }

  getDuration () {
    return this.player._status.duration
  }

  getPosition () {
    return this.player._status.position
  }

  seek (time) {
    time = Math.max(time, 0)
    if (this.player.dom.video.duration) {
      time = Math.min(time, this.player.dom.video.duration)
    }
    if (this.player.dom.video.currentTime < time) {
      // this.notice(
      //   `${this.tran('FF')} ${(time - this.player.dom.video.currentTime).toFixed(
      //     0
      //   )} ${this.tran('s')}`
      // )
    } else if (this.player.dom.video.currentTime > time) {
      // this.notice(
      //   `${this.tran('REW')} ${(this.player.dom.video.currentTime - time).toFixed(
      //     0
      //   )} ${this.tran('s')}`
      // )
    }

    const position = this.player.dom.video.currentTime
    this.player.dom.video.currentTime = time
    this.setBarWidth(time / this.player.dom.video.duration)
    this.player.dom.ptime.innerHTML = domUtils.secondToTime(time)
    this.player.trigger('seek', {type: 'seek', position, offset: time})
  }

  initPlayedBar () {
    const thumbMove = e => {
      let percentage =
        ((e.clientX || e.changedTouches[0].clientX) -
          domUtils.getElementViewLeft(this.player.dom.playedBarWrap)) /
        this.player.dom.playedBarWrap.clientWidth
      percentage = Math.max(percentage, 0)
      percentage = Math.min(percentage, 1)
      this.setBarWidth(percentage)

      this.player.dom.ptime.innerHTML = domUtils.secondToTime(
        percentage * this.player.dom.video.duration
      )
    }

    const thumbUp = e => {
      document.removeEventListener(domUtils.nameMap.dragEnd, thumbUp)
      document.removeEventListener(domUtils.nameMap.dragMove, thumbMove)
      let percentage =
        ((e.clientX || e.changedTouches[0].clientX) -
          domUtils.getElementViewLeft(this.player.dom.playedBarWrap)) /
        this.player.dom.playedBarWrap.clientWidth
      percentage = Math.max(percentage, 0)
      percentage = Math.min(percentage, 1)
      this.setBarWidth(percentage)
      this.seek(this.getBarWidth() * this.player.dom.video.duration)
      // this.player.timer.enable('progress')
    }

    this.player.dom.playedBarWrap.addEventListener(
      domUtils.nameMap.dragStart,
      () => {
        // this.player.timer.disable('progress')
        document.addEventListener(domUtils.nameMap.dragMove, thumbMove)
        document.addEventListener(domUtils.nameMap.dragEnd, thumbUp)
      }
    )

    this.player.dom.playedBarWrap.addEventListener(
      domUtils.nameMap.dragMove,
      e => {
        if (this.player.dom.video.duration) {
          const px = domUtils.cumulativeOffset(this.player.dom.playedBarWrap)
            .left
          const tx = (e.clientX || e.changedTouches[0].clientX) - px
          if (tx < 0 || tx > this.player.dom.playedBarWrap.offsetWidth) {
            return
          }
          const time =
            this.player.dom.video.duration *
            (tx / this.player.dom.playedBarWrap.offsetWidth)
          if (isMobile()) {
            this.thumbnails && this.thumbnails.show()
          }
          this.thumbnails && this.thumbnails.move(tx)
          this.player.dom.playedBarTime.style.left = `${tx - 20}px`
          this.player.dom.playedBarTime.innerText = domUtils.secondToTime(time)
          this.player.dom.playedBarTime.classList.remove('hidden')
        }
      }
    )

    this.player.dom.playedBarWrap.addEventListener(
      domUtils.nameMap.dragEnd,
      () => {
        if (isMobile()) {
          this.thumbnails && this.thumbnails.hide()
        }
      }
    )

    if (!isMobile()) {
      this.player.dom.playedBarWrap.addEventListener('mouseenter', () => {
        if (this.player.dom.video.duration) {
          this.thumbnails && this.thumbnails.show()
          this.player.dom.playedBarTime.classList.remove('hidden')
        }
      })

      this.player.dom.playedBarWrap.addEventListener('mouseleave', () => {
        if (this.player.dom.video.duration) {
          this.thumbnails && this.thumbnails.hide()
          this.player.dom.playedBarTime.classList.add('hidden')
        }
      })
    }
  }
}

export default Progress
